<form name="input" class="configurator" action="{% url railroad.viewhosts.views.customgraph %}" method="get" id="configurator">
    <div class="left">
        <fieldset>
            <legend>Add graphs</legend>
            <ul class="fieldset_ul">
                {# Yes, we really do need both name and id. formSerializer and automcomplete use name, not id. #}
                <li>
                    <label for="host">Host</label>
                    <input class="autocomplete value" name="host" id="host" type="text">
                </li>

                <li>
                    <label for="group">Groups</label>
                    <input class="autocomplete value" name="group" id="group" type="text">
                </li>

                <li>
                    <label for="service">Services</label>
                    <input class="autocomplete value" name="service" id="service" type="text">
                </li>
                {# The padding on the below li is necessary to display the buttons properly. #}
                <li style="padding: 5px;">
                    <label>&nbsp;</label>
                    <ul class="liButtons">
                        <li id="add" >Add</li
                        ><li id="clearform" >Clear Fields</li
                        ><li id="cleargraphs" >Clear Graphs</li>
                        <span class="hint" id="csv">
                            You can auto complete multiple comma separated values
                            at a time.
                        </span >
                    </ul>
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>Filter by value</legend>
            <ul class="fieldset_ul">
                <li>
                    <label for="min">Range</label>
                    <input class="value half watermark" name="min" id="min" type="text" value="Min"> to
                    <input class="value half watermark" name="max" id="max" type="text" value="Max">
                </li>
                <li>
                    <label>&nbsp;</label>
                    <ul class="liButtons">
                        <li id="filter">Filter</li
                        ><li id="unfilter">Unfilter</li>
                        <span class="hint" id="filterhint">
                            You can filter by min, max, or both. If a value of 0 is used then the filter will ignore it. The unfilter button takes the graphs back to how they were.
                        </span>
                    </ul>
                </li>
            </ul>
        </fieldset>
    </div>
    <div class="right">
        <fieldset>
            <legend>Schedule Downtime</legend>
            <p class="small">
                Schedule nagios downtime for all objects checked below.
            </p>
            <ul class="fieldset_ul">
                <li>
                    <label class="from">Start</label>
                    <input type="text" id="downtime-from" />
                </li>
                <li>
                    <label class="to">Stop</label>
                    <input type="text" id="downtime-to" />
                </li>
                <li>
                    <label>Comment</label>
                    <input type="text" id="downtime-comment" />
                </li>
                <li>
                    <label>For</label>
                    <input type="radio" name="hostorservice" id="downtime-host" />Hosts
                    <input type="radio" name="hostorservice" id="downtime-service" />Services
                </li>
                <li style="padding: 5px;">
                    <label>&nbsp;</label>
                    <ul class="liButtons">
                        <li id="downtime-submit">Submit</li>
                    </ul>
                </li>
            </ul>

        </fieldset>
    </div>
</form>
